<template>
  <!-- <a-modal
    :title="formTile + '工艺库'"
    :visible="true"
    width="70%"
    :footer="null"
    @cancel="reset"
  > -->
  <div class="main">
    <a-card :title="formTile + '工艺单'" class="top" v-if="nav_show">
      <template #extra>
        <a-button type="primary" @click="print" ghost
          style="position: fixed;right: 230px;top: 70px;z-index: 100;">打印</a-button>
        <a-button type="primary" @click="toTem"
          style="position: fixed;right: 110px;top: 70px;z-index: 100;">转工艺模板</a-button>
        <a-button type="primary" style="position: fixed;right: 30px;top: 70px;z-index: 100;"
          @click="handleSubmit">保存</a-button>
      </template></a-card>
    <a-card :title="formTile + '工艺单'">
      <template #extra>
        <!-- <a-button type="primary" v-if="billList.status == 0" @click="getDetail(record)" ghost>提交</a-button>
        <a-button type="primary" v-if="billList.status == 1" @click="backsubmit(record)" ghost>反提交</a-button> -->
        <a-button type="primary" @click="print" ghost style="margin-left: 10px;">打印</a-button>
        <a-button type="primary" @click="toTem" style="margin-left: 10px;">转工艺模板</a-button>
        <a-button type="primary" @click="handleSubmit" style="margin-left: 10px;">保存</a-button>
      </template>

      <div class="steps-content">
        <a-row type="flex" justify="start" align="top">
          <a-row style="width:100%;width: 100%;height: 48px;font-size: 18px;">
            <a-col :span="16" style="display:flex">
              <span style="font-size: 14px;width: 150px;line-height: 32px;">单据编号/样衣号：</span>
              <a-input v-model="inputBillNo" :disabled="disabled" placeholder="请输入单据编号/样衣号"
                @pressEnter="pressEnter"></a-input>

            </a-col>
            <a-col :span="8" style="display: flex;justify-content: end;">
              <div>
                <a-button type="primary" :disabled="!disabled" @click="toCopy(1)">
                  复制
                </a-button>
                <a-button type="primary" :disabled="!disabled" style="margin-left:10px" @click="toCopy(2)">
                  选择模版
                </a-button>
                <a-button type="primary" v-if="this.id" :disabled="!disabled" style="margin-left:10px" @click="toNewPart">
                  选择部件
                </a-button>
              </div>
            </a-col>

          </a-row>
          <a-col :span="24">
            <a-descriptions bordered :column="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }">
              <a-descriptions-item label="单号">
                {{ billList.billNo }}
              </a-descriptions-item>
              <a-descriptions-item label="版次">
                {{ billList.bc }}
              </a-descriptions-item>
              <a-descriptions-item label="第几件">
                {{ billList.js }}
              </a-descriptions-item>
              <a-descriptions-item label="上货季">
                {{ billList.scseason }}
              </a-descriptions-item>
              <a-descriptions-item label="样衣号">
                {{ billList.sampleCode }}
              </a-descriptions-item>
              <a-descriptions-item label="款号">
                {{ billList.styleid }}
              </a-descriptions-item>
              <a-descriptions-item label="品名">
                {{ billList.sampleName }}
              </a-descriptions-item>
              <a-descriptions-item label="品类">
                {{ billList.sampleCat }}
              </a-descriptions-item>
              <a-descriptions-item label="工艺师">
                {{ statusUser }}
              </a-descriptions-item>
              <a-descriptions-item label="制版师">
                {{ billList.bs }}
              </a-descriptions-item>
              <a-descriptions-item label="放码师">
                {{ billList.fmshor }}
              </a-descriptions-item>
              <a-descriptions-item label="时间">
                {{ statusTime }}
              </a-descriptions-item>
            </a-descriptions>
            <a-card>
              <a-form :form="form" @submit="handleSubmit" :labelCol="formItemLayout.labelCol"
                :wrapperCol="formItemLayout.wrapperCol">
                <a-form-item label="颜色">
                  <a-checkbox-group v-decorator="['stycolorid']" style="width: 100%; text-align: left;">
                    <a-checkbox :value="item" v-for="item, i in stycolor" :key="i">
                      {{ item }}
                    </a-checkbox>
                  </a-checkbox-group>
                </a-form-item>
                <a-form-item label="后道工序">
                  <a-textarea allow-clear :rows="7" placeholder="请输入内容" v-decorator="[
                    `beof`,
                    {
                      validateTrigger: ['change', 'blur'],

                    }
                  ]"></a-textarea>
                  <!-- rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入后道工序'
                      }
                    ] -->
                </a-form-item>
                <a-form-item label="面料正反面说明">
                  <a-textarea allow-clear :rows="3" placeholder="请输入内容" v-decorator="[
                    `fabricDesc`,
                    {
                      validateTrigger: ['change', 'blur'],

                    }
                  ]"></a-textarea>
                  <!-- rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入面料正反面说明'
                      }
                    ] -->
                </a-form-item>
                <a-form-item label="纸样数量">
                  <a-textarea allow-clear :rows="3" placeholder="请输入纸张数量" v-decorator="[
                    `zyNum`,
                    {
                      validateTrigger: ['change', 'blur'],

                    }
                  ]"></a-textarea>
                  <!-- rules: [
                      {
                        required: true,
                        message: '请输入纸张数量'
                      }
                    ] -->
                </a-form-item>
                <a-form-item label="裁床注意">
                  <a-textarea allow-clear :rows="3" placeholder="请输入内容" v-decorator="[
                    `cutting`,
                    {
                      validateTrigger: ['change', 'blur'],

                    }
                  ]"></a-textarea>
                  <!-- rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入裁床注意'
                      }
                    ] -->
                </a-form-item>
                <a-form-item label="工序流程">
                  <a-textarea allow-clear :rows="3" placeholder="请输入内容" v-decorator="[
                    `process`,
                    {
                      validateTrigger: ['change', 'blur'],

                    }
                  ]"></a-textarea>
                  <!-- rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入工序流程'
                      }
                    ] -->
                </a-form-item>
                <!-- <a-form-item label="粘衬部位">
                    <a-textarea
                      allow-clear
                      :rows="3"
                      placeholder="请输入内容"
                      v-decorator="[
                  `interlining`,
                  {
                    validateTrigger: ['change', 'blur'],
                   
                  }
                ]"
                    ></a-textarea>
                  </a-form-item> -->
                <a-form-item label="特艺-排料/剪裁要求">
                  <a-textarea allow-clear :rows="3" placeholder="请输入内容" v-decorator="[
                    `tyReq`,
                    {
                      validateTrigger: ['change', 'blur'],

                    }
                  ]"></a-textarea>
                  <!-- rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入特艺-排料/剪裁要求'
                      }
                    ] -->
                </a-form-item>
                <a-form-item label="特艺/特殊工序">
                  <a-textarea allow-clear :rows="3" placeholder="请输入内容" v-decorator="[
                    `tyProcess`,
                    {
                      validateTrigger: ['change', 'blur'],

                    }
                  ]"></a-textarea>
                </a-form-item>

                <a-form-item label="缝制工艺">
                  <a-textarea showCount allow-clear :rows="11" placeholder="请输入内容" @change="changeCommonReq" v-decorator="[
                    `commonReq`,
                    {
                      validateTrigger: ['change', 'blur'],

                    }
                  ]"></a-textarea>
                  <span
                    style="position: absolute;right: 10px;user-select: none;z-index: 999;color: rgb(150, 151, 153);top: -20px;">{{
                      num }}/600</span>
                  <!-- rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入特艺/特殊工艺'
                      }
                    ] -->
                </a-form-item>
                <a-form-item label="注意事项">
                  <a-textarea showCount allow-clear :rows="10" placeholder="请输入内容" v-decorator="[
                    `attention`,
                    {
                      validateTrigger: ['change', 'blur'],

                    }
                  ]"></a-textarea>

                </a-form-item>
                <a-row style="margin: 0 10% 0 12.6%;text-align:left">
                  <a-col :span="12">
                    <a-form-item label="纸样1">
                      经:
                      <a-input allow-clear style="width:40%" placeholder="请输入内容" v-decorator="[
                        `long1`,
                        {
                          validateTrigger: ['change', 'blur'],

                        }
                      ]" />
                      纬:
                      <a-input allow-clear style="width:40%;" placeholder="请输入内容" v-decorator="[
                        `lat1`,
                        {
                          validateTrigger: ['change', 'blur'],

                        }
                      ]" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="纸样2">
                      经:
                      <a-input allow-clear placeholder="请输入内容" style="width:40%" v-decorator="[
                        `long2`,
                        {
                          validateTrigger: ['change', 'blur'],

                        }
                      ]" />
                      纬:
                      <a-input allow-clear style="width:40%;" placeholder="请输入内容" v-decorator="[
                        `lat2`,
                        {
                          validateTrigger: ['change', 'blur'],

                        }
                      ]" />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-form-item label="款式图" help="只支持图片格式" style="text-align:left">
                  <a-upload name="file" list-type="picture-card" :multiple="true" class="avatar-uploader"
                    :data="{ type: 1 }" :fileList="fileList" @change="handleChange" :action="uploadUrl">
                    <div>
                      <a-icon type="plus" />
                      <div class="ant-upload-text">
                        上传图片
                      </div>
                    </div>
                  </a-upload>
                </a-form-item>
                <a-card title="工艺标签">
                  <a-row>
                    <a-col :span="12">
                      <a-form-item label="穿着方式">
                        <a-select mode="multiple" style="width: 100%" placeholder="请选择" allow-clear
                          @focus="getDictChildList('WEARING_WAY', 'wearingWayList')"
                          v-decorator="[`wearingWay`, { validateTrigger: ['change', 'blur'], }]">
                          <a-select-option v-for="item, i in wearingWayList" :key="i" :value="item.name">
                            {{ item.name }}
                          </a-select-option>
                        </a-select>
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item label="工艺细节">
                        <a-select mode="multiple" style="width: 100%" placeholder="请选择"
                          @focus="getDictChildList('CRAFT_DETAIL', 'craftDetailList')" allow-clear
                          v-decorator="[`craftDetail`, { validateTrigger: ['change', 'blur'], }]">
                          <a-select-option v-for="item, i in craftDetailList" :key="i" :value="item.name">
                            {{ item.name }}
                          </a-select-option>
                        </a-select>
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item label="口袋样式">
                        <a-select mode="multiple" style="width: 100%" placeholder="请选择" allow-clear
                          @focus="getDictChildList('POCKET_STYLE', 'pocketStyleList')"
                          v-decorator="[`pocketStyle`, { validateTrigger: ['change', 'blur'], }]">
                          <a-select-option v-for="item, i in pocketStyleList" :key="i" :value="item.name">
                            {{ item.name }}
                          </a-select-option>
                        </a-select>
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item label="下摆样式">
                        <a-select mode="multiple" style="width: 100%" placeholder="请选择" allow-clear
                          @focus="getDictChildList('LOWER_HEM', 'lowerHemList')"
                          v-decorator="[`lowerHem`, { validateTrigger: ['change', 'blur'], }]">
                          <a-select-option v-for="item, i in lowerHemList" :key="i" :value="item.name">
                            {{ item.name }}
                          </a-select-option>
                        </a-select>
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item label="开叉方式">
                        <a-select mode="multiple" style="width: 100%" placeholder="请选择" allow-clear
                          @focus="getDictChildList('SLASH_WAY', 'slashWayList')"
                          v-decorator="[`slashWay`, { validateTrigger: ['change', 'blur'], }]">
                          <a-select-option v-for="item, i in slashWayList" :key="i" :value="item.name">
                            {{ item.name }}
                          </a-select-option>
                        </a-select>
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item label="衣门襟">
                        <a-select mode="multiple" style="width: 100%" placeholder="请选择" allow-clear
                          @focus="getDictChildList('COAT_FLAP', 'coatFlapList')"
                          v-decorator="[`coatFlap`, { validateTrigger: ['change', 'blur'], }]">
                          <a-select-option v-for="item, i in coatFlapList" :key="i" :value="item.name">
                            {{ item.name }}
                          </a-select-option>
                        </a-select>
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item label="裤门襟">
                        <a-select mode="multiple" style="width: 100%" placeholder="请选择" allow-clear
                          @focus="getDictChildList('TROUSER_FLAP', 'trouserFlagList')"
                          v-decorator="[`trouserFlag`, { validateTrigger: ['change', 'blur'], }]">
                          <a-select-option v-for="item, i in trouserFlagList" :key="i" :value="item.name">
                            {{ item.name }}
                          </a-select-option>
                        </a-select>
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item label="是否有里">
                        <a-select mode="multiple" style="width: 100%" placeholder="请选择" allow-clear
                          @focus="getDictChildList('IS_LINING', 'isLiningList')"
                          v-decorator="[`isLining`, { validateTrigger: ['change', 'blur'], }]">
                          <a-select-option v-for="item, i in isLiningList" :key="i" :value="item.name">
                            {{ item.name }}
                          </a-select-option>
                        </a-select>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </a-card>
              </a-form>
            </a-card>

          </a-col>
        </a-row>
      </div>
      <div v-if="this.id">
        <a-tabs :default-active-key="0" v-model="current">
          <a-tab-pane :tab="item.title" v-for="item in steps" :key="item.code">
          </a-tab-pane>
          <a-tab-pane v-if="billList.brand == '校服'" :key="4" tab="校服校标">
          </a-tab-pane>
          <a-tab-pane :key="5" tab="工艺尺寸">
          </a-tab-pane>
        </a-tabs>
      </div>
      <div v-if="this.id">
        <a-card v-if="current == 0">
          <a-table :columns="columns5" :data-source="craftBillInterlining">
            <template slot="action" slot-scope="txt, record">
              <a class="mr-10" @click="tocraft(record)">
                <a-icon type="edit" />编辑
              </a>
              <a-popconfirm :title="`确定要删除该项吗?`" @confirm="deleteCraft(record)">
                <a class="mr-10">
                  <a-icon type="delete" />删除
                </a>
              </a-popconfirm>
            </template>

          </a-table>
          <a-button type="dashed" style="width: 100%;margin-top: 20px;" @click="tocraft('')">
            <a-icon type="plus" />添加粘衬部位
          </a-button>

        </a-card>
        <a-card v-if="current == 1">
          <a-table :columns="columns" :data-source="craftBillTemplate">
            <template slot="description" slot-scope="text, record">
              <a-textarea style="margin: -5px 0" :value="text" @blur="e => handleChangeinput(e.target.value, record.id)">
              </a-textarea>

            </template>
            <template slot="action" slot-scope="txt, record">
              <a-popconfirm :title="`确定要删除该项吗?`" @confirm="deleteRecord(record)">
                <a class="mr-10">
                  <a-icon type="delete" />删除
                </a>
              </a-popconfirm>
            </template>

          </a-table>
          <a-button type="dashed" style="width: 100%;margin-top: 20px;" @click="addList('')">
            <a-icon type="plus" />添加工艺
          </a-button>

        </a-card>
        <!-- <a-card
        title="部位信息"
        v-if="current==2"
      >
        <template #extra>
          <a-button
            type="primary"
            style="margin-left:10px"
            @click="toPart"
          >添加</a-button>
          <a-button
            type="primary"
            style="margin-left:10px"
            @click="addPart"
          >选择</a-button>
        </template>

        <a-list
          :grid="{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 3, xl: 4, xxl: 6}"
          :data-source="craftBillPart"
        >
          <a-list-item
            slot="renderItem"
            slot-scope="item, index"
          >
            <a-card>
              <img
                :src="item.imgurl"
                style="width: 100%;height: 100px;object-fit: contain;"
              >
              <div class="cardItemContent">
                <p class="title">工艺部位:{{ item.partName}}</p>
                <p class="title">工艺做法:{{ item.operName }}</p>
                <p class="title">描述:{{ item.description }}</p>
              </div>
              <template
                slot="actions"
                class="ant-card-actions"
              >
                <div style="display: flex">
                  <a-popconfirm
                    :title="`确定要删除该项吗?`"
                    @confirm="deletePart(item,index)"
                  >
                    <a-button
                      type="link"
                      block
                      style="color: red"
                    >
                      <a-icon type="delete" />删除
                    </a-button>

                  </a-popconfirm>

                </div>
              </template>
            </a-card>
          </a-list-item>
        </a-list>

      </a-card> -->
        <a-card v-if="current == 2">
          <a-table :columns="columns2" :defaultExpandAllRows="true" :data-source="craftBillPart">
            <template slot="imgurl" slot-scope="txt, record">
              <img style="width:150px;height: 100px;object-fit: scale-down;" :src="record.imgurl"
                @click="prevImg(record.imgurl)" :alt="record.imgurl">
            </template>
            <!-- <template slot="seq" slot-scope="text, record">
              <a-input style="margin: -5px 0;width:100px" :value="text" type="number" class="inputRight"
                @blur="e => changeSeq(e.target.value, record.id)" />

            </template> -->
            <!-- <template slot="description" slot-scope="text, record">
              <a-textarea style="margin: -5px 0" :value="text" @blur="e => changeinputPart(e.target.value, record.id)">
              </a-textarea>
            </template> -->
            <template slot="action" slot-scope="txt, record">
              <a class="mr-10" @click="toPart(record)">
                <a-icon type="edit" />编辑
              </a>
              <a-popconfirm :title="`确定要删除该项吗?`" @confirm="deletePart(record)">
                <a class="mr-10">
                  <a-icon type="delete" />删除
                </a>
              </a-popconfirm>
            </template>

          </a-table>
          <a-button type="dashed" style="width: 50%;margin-top: 20px;" @click="toPart">
            <a-icon type="plus" />添加部位
          </a-button>
          <a-button type="dashed" style="width: 50%;margin-top: 20px;" @click="addPart">
            <a-icon type="plus" />选择部位
          </a-button>
        </a-card>
        <a-card v-if="current == 3">
          <a-table :columns="columns3" :data-source="craftBillSpec">
            <template slot="imgurl" slot-scope="txt, record">
              <img style="height: 100px;object-fit: scale-down;" :src="record.imgurl" @click="prevImg(record.imgurl)"
                :alt="record.imgurl">
            </template>
            <template slot="action" slot-scope="txt, record">
              <a class="mr-10" @click="addSea(record)">
                <a-icon type="edit" />编辑
              </a>
              <a-popconfirm :title="`确定要删除该项吗?`" @confirm="deleteSea(record)">
                <a class="mr-10">
                  <a-icon type="delete" />删除
                </a>
              </a-popconfirm>
            </template>

          </a-table>
          <a-button type="dashed" style="width: 100%;margin-top: 20px;" @click="addSea('')">
            <a-icon type="plus" />添加特艺
          </a-button>
        </a-card>
        <a-card v-if="current == 4">
          <a-table :columns="columns4" :data-source="craftBillSchoolVos">
            <template slot="imgurl" slot-scope="txt, record">
              <img style="height: 100px;object-fit: scale-down;" :src="record.imgurl" @click="prevImg(record.imgurl)"
                :alt="record.imgurl">
            </template>
            <template slot="action" slot-scope="txt, record">
              <a class="mr-10" @click="addSchool(record)">
                <a-icon type="edit" />编辑
              </a>
              <a-popconfirm :title="`确定要删除该项吗?`" @confirm="deleteSchool(record)">
                <a class="mr-10">
                  <a-icon type="delete" />删除
                </a>
              </a-popconfirm>
            </template>

          </a-table>
          <a-button type="dashed" style="width: 100%;margin-top: 20px;" @click="addSchool('')">
            <a-icon type="plus" />添加校服校标
          </a-button>

        </a-card>
        <sizeList v-if="current == 5" :sampleCode1="billList.sampleCode" :id1="id" :brand="billList.brand" :xl="billList.xl"></sizeList>
      </div>
      <div class="steps-action">
        <a-button type="primary" @click="reset">返回</a-button>
        <div>
        </div>
      </div>
      <templateList v-if="showTemplate" :billId="id" @close="close"></templateList>
      <partList v-if="showPart" :billId="id" :maxSeq="maxSeq" :billList="billList" @closePart="closePart"></partList>
      <bill v-if="showBill" :backList="backList" @closeBill="closeBill"></bill>
      <tableList v-if="showTable" :tableType="tableType" @closeCopy="closeCopy">
      </tableList>
      <seaList v-if="showSea" :billId="id" :seaDetail="seaDetail" @closeSea="closeSea"></seaList>
      <schoolList v-if="showSchool" :billId="id" :schoolDetail="schoolDetail" @closeSchool="closeSchool"></schoolList>
      <addPart v-if="toAddPart" :billId="id" :maxSeq="maxSeq" :partDetail="partDetail" @closeAddPart="closeAddPart">
      </addPart>
      <newPart v-if="showNewPart" :billId="id" :maxSeq="maxSeq" :billList="billList" @closeNewPart="closeNewPart">
      </newPart>
      <craftBillInter v-if="showCraftBillInter" :craftDetail="craftDetail" :billId="id" @closecraft="closecraft">
      </craftBillInter>

      <a-modal v-model="showBigImg" title="图片预览" @ok="showBigImg = false" :footer="null" width="60%" :mask="true">
        <div class="previmg">
          <img :src="prevImageUrl" />
        </div>
      </a-modal>
      <a-modal v-model="showPrint" title="打印" width="90%" @ok="showPrint = false" :footer="null">
        <pirntInfo>
        </pirntInfo>
      </a-modal>
    </a-card>
  </div>
  <!-- </a-modal> -->
</template>

<script>
import {
  createList,
  updatelist,
  getBillList,
  getDetailList,
  getBillTable,
  getInterliningList,
  deleteInterlining,
  getTemplateList,
  updateTemplate,
  deleteTemplate,
  getSpecList,
  deleteSpec,
  getPartList,
  updatePart,
  deletePart,
  getSchoolList,
  saveInterlining,
  saveTemplate,
  savePart,
  saveSpec,
  saveSchool,
  deleteSchool,
  getDictChildList
} from '@api/rd/index'
import { uploadUrl } from '@api/rd/index.js'
import templateList from './template.vue'
import craftBillInter from './craftBillInter.vue'
import partList from './part.vue'
import seaList from './sea.vue'
import bill from './bill.vue'
import addPart from './addpart.vue'
import schoolList from './school.vue'
import tableList from './tableList.vue'
import newPart from './newPart.vue'
import sizeList from '../size/index.vue'
import pirntInfo from '../print/index.vue'


const columns = [
  {
    title: '描述',
    dataIndex: 'description',
    scopedSlots: { customRender: 'description' }
  },
  {
    title: '操作',
    width: 220,
    scopedSlots: { customRender: 'action' }
  }
]
const columns3 = [
  {
    title: '序号',
    dataIndex: 'seq'
  },
  {
    title: '特艺',
    dataIndex: 'specName'
  },
  {
    title: '销售色',
    dataIndex: 'styColorId'
  },
  {
    title: '跳码',
    dataIndex: 'jumpSize'
  },
  {
    title: '图片',
    scopedSlots: { customRender: 'imgurl' }
  },
  {
    title: '操作',
    width: 130,
    scopedSlots: { customRender: 'action' }
  }
]
const columns4 = [
  {
    title: '序号',
    dataIndex: 'seq'
  },
  {
    title: '销售色',
    dataIndex: 'styColorId'
  },
  {
    title: '描述',
    dataIndex: 'description'
  },
  {
    title: '图片',
    scopedSlots: { customRender: 'imgurl' }
  },
  {
    title: '操作',
    width: 100,
    scopedSlots: { customRender: 'action' }
  }
]
const columns2 = [
  {
    title: 'ID',
    dataIndex: 'id'
  },
  {
    title: '序号',
    dataIndex: 'seq',
    sorter: (a, b) => a.seq - b.seq,
    scopedSlots: { customRender: 'seq' }
  },
  {
    title: '工艺部位',
    width: 150,
    dataIndex: 'partName'
  },
  {
    title: '工艺做法',
    width: 150,
    dataIndex: 'operName'
  },
  {
    title: '图片',
    scopedSlots: { customRender: 'imgurl' }
  },
  {
    title: '描述',
    width: 300,
    dataIndex: 'description',
    scopedSlots: { customRender: 'description' }
  },
  {
    title: '操作',
    width: 150,
    scopedSlots: { customRender: 'action' }
  }
]
const columns5 = [
  {
    title: '编号',
    dataIndex: 'code'
  },
  {
    title: '压力',
    dataIndex: 'pressure'
  },
  {
    title: '温度',
    dataIndex: 'temperature'
  },
  {
    title: '时间',
    dataIndex: 'time'
  },
  {
    title: '部位',
    dataIndex: 'part'
  },
  {
    title: '操作',
    width: 220,
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  components: {
    templateList,
    partList,
    seaList,
    bill,
    newPart,
    addPart,
    schoolList,
    tableList,
    craftBillInter,
    pirntInfo,
    sizeList
  },

  props: {
    content: {
      type: Object,
      default: null
    }
  },

  data() {
    return {
      id: '',
      num: 0,
      columns,
      columns2,
      columns3,
      columns4,
      columns5,
      nav_show: false,
      showPrint: false,
      craftBillSchoolVos: [],
      value: this.text,
      billNo: '',
      inputBillNo: '',
      backList: [],
      tableType: '',
      showBill: false,
      showTable: false,
      statusTime: '',
      prevImageUrl: '',
      showSchool: false,
      showBigImg: false,
      craftDetail: {},
      seaDetail: {},
      schoolDetail: {},
      showCraftBillInter: false,
      statusUser: '',
      uploadUrl,
      loading: false,
      showTemplate: false,
      showPart: false,
      idEdit: false,
      craftBillTemplate: [],
      craftBillSpec: [],
      fileList: [],
      stycolor: [],
      disabled: false,
      showSea: false,
      firstForm: {},
      nextForm: {},
      continue: true,
      maxSeq: 0,
      toAddPart: false,
      showNewPart: false,
      gettime: '',
      fileds: [],
      colorList: [],
      codeList: [],
      billList: {},
      id: '',
      finalForm: {},
      brandCode: '',
      xlCode: '',
      copyid: '',
      craftBillPart: [],
      ifCopy: false,
      craftBillInterlining: [],
      imageUrl: '',
      form: this.$form.createForm(this),
      current: 0,
      editingKey: '',
      editKey: '',
      nonError: true,
      wearingWayList: [],
      craftDetailList: [],
      pocketStyleList: [],
      lowerHemList: [],
      slashWayList: [],
      coatFlapList: [],
      trouserFlagList: [],
      isLiningList: [],
      partDetail: {},
      steps: [
        { code: 0, title: '粘衬部位' },
        { code: 1, title: '统一工艺' },
        { code: 2, title: '部位信息' },
        { code: 3, title: '特艺确认' }
      ],
      formItemLayout: {
        labelCol: {
          xl: { span: 5 }
        },
        wrapperCol: {
          xl: { span: 15 }
        }
      }
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo || null
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  // 组件销毁前
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  created() {
    const id = this.$route.query.id
    const billNo = this.$route.query.billNo
    if (billNo) {
      this.inputBillNo = billNo
    }
    if (id) {
      this.formTile = '编辑'
      this.id = id
      this.billNo = billNo
      this.$nextTick(() => {
        this.getBillList()
        this.disabled = true
        this.getDetail()
      })
      this.idEdit = true
    } else {
      this.formTile = '新增'
      setTimeout(() => {
        this.form.setFieldsValue(
          {
            cutting: '核对样衣后裁剪、核对样板片数；排版避免色差与边中色差、拉布留意面料纬斜法一致，丝缕归直；摊布松度适宜，不可打刀眼、钻孔。'
          },
          200
        )
      })
      // this.add()
    }
    setInterval(this.getTime, 500)
  },
  methods: {
    handleScroll() {
      // 页面滑动的距离
      let scrollTop = document.documentElement.scrollTop
      // 当页面滑动的距离大于300px时元素显示，否则不显示
      if (scrollTop >= 100) {
        this.nav_show = true
      } else {
        this.nav_show = false
      }
    },
    toTem() {
      this.$router.push({ path: 'billTemplate/create', query: { id: this.id, type: 1 } })
    },
    print() {
      this.showPrint = true
      // this.$router.push({ path: '/rd/print', query: { id: this.id, sampleCode: this.billList.sampleCode, brand: this.billList.brand, xl: this.billList.xl } })
    },
    getTime() {
      var _this = this
      let yy = new Date().getFullYear()
      var mm = new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1
      var dd = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
      let hh = new Date().getHours()
      let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
      let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
      _this.gettime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss
    },
    pressEnter(e) {
      this.disabled = true
      if (this.formTile == '新增') {
        this.getBillTable()
      } else {
        this.getBillList()
      }
    },
    changeCommonReq(e) {
      console.log(e);
      this.num = e.target.value.length
    },
    async getDictChildList(name, list) {
      if (!this[list].length) {
        const params = {
          name: name
        }
        try {
          const res = await getDictChildList('dict', params)
          if (res.code == 200) {
            this[list] = res.data
          } else {
            if (res.msg) {
              this.$message.error(res.msg)
            } else {
              this.$message.error('获取数据字典失败！')
            }
          }
        } catch (error) {
          this.$message.error('获取数据字典失败！')
        }
      }
    },

    add() {
      const obj = { code: '', pressure: '', temperature: '', time: '', part: '' }
      this.craftBillInterlining.push(obj)
    },
    async getInterliningList() {
      const params = {
        id: this.ifCopy ? this.copyid : this.id
      }
      try {
        const res = await getInterliningList('bill', params)
        if (res.code == 200) {
          this.craftBillInterlining = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取粘衬清单失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取粘衬清单失败！')
      }
    },
    async getTemplateList() {
      const params = {
        id: this.ifCopy ? this.copyid : this.id
      }
      try {
        const res = await getTemplateList('bill', params)
        if (res.code == 200) {
          this.craftBillTemplate = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取统一工艺列表失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取统一工艺列表失败')
      }
    },
    async getPartList() {
      const params = {
        id: this.ifCopy ? this.copyid : this.id
      }
      try {
        const res = await getPartList('bill', params)
        if (res.code == 200) {
          this.craftBillPart = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取部位列表失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取部位列表失败！')
      }
    },
    async getSpecList() {
      const params = {
        id: this.ifCopy ? this.copyid : this.id
      }
      try {
        const res = await getSpecList('bill', params)
        if (res.code == 200) {
          this.craftBillSpec = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取特艺列表失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取特艺列表失败！')
      }
    },
    async getSchoolList() {
      const params = {
        id: this.ifCopy ? this.copyid : this.id
      }
      try {
        const res = await getSchoolList('bill', params)
        if (res.code == 200) {
          this.craftBillSchoolVos = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取校服校标列表失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取校服校标失败！')
      }
    },
    prevImg(url) {
      this.prevImageUrl = url
      this.showBigImg = true
    },
    reset() {
      this.form.resetFields()
      this.$router.push(`/rd/bill`)
    },
    async deleteRecord(record) {
      const params = {
        id: record.id
      }
      const { realname } = this.userInfo
      params.operator = realname
      try {
        const res = await deleteTemplate('bill', params)
        if (res.code == 200) {
          this.$message.success('删除工艺成功！')
          this.getTemplateList()
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('删除失败！')
      }
    },
    async deletePart(record) {
      const params = {
        id: record.id
      }
      const { realname } = this.userInfo
      params.operator = realname
      try {
        const res = await deletePart('bill', params)
        if (res.code == 200) {
          this.$message.success('删除部位成功！')
          this.getPartList()
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('删除失败！')
      }
    },
    async deleteSea(record) {
      const params = {
        id: record.id
      }
      const { realname } = this.userInfo
      params.operator = realname
      try {
        const res = await deleteSpec('bill', params)
        if (res.code == 200) {
          this.$message.success('删除特艺成功！')
          this.getSpecList()
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('删除失败！')
      }
    },
    async deleteSchool(record) {
      const params = {
        id: record.id
      }
      const { realname } = this.userInfo
      params.operator = realname
      try {
        const res = await deleteSchool('bill', params)
        if (res.code == 200) {
          this.$message.success('删除校服校标成功！')
          this.getSchoolList()
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('删除失败！')
      }
    },
    handleChange(info, item, index) {
      let fileList = [...info.fileList]
      this.fileList = [...fileList]
      if (info.file.status === 'uploading') {
        return
      }
      if (info.file.status === 'done') {
        let list = fileList.map(file => {
          if (file.response) {
            file.url = file.response.data.url
          }
          return file
        })
        this.fileList = list.slice(-1)
      }
      if (info.file.response.code != '200') {
        this.$message.error(info.file.response.msg)
        info.file.status = 'error'
        this.fileList.map((item) => {
          if (item.thumbUrl == info.file.thumbUrl) {
            item.status = 'error'
          }
        })
      }
    },
    addList() {
      this.showTemplate = true
    },
    addPart() {
      this.showPart = true
      const list = []
      if (this.craftBillPart.length) {
        this.craftBillPart.map(item => {
          list.push(item.seq)
        })
        this.maxSeq = Math.max.apply(null, list)
      }
    },
    addSea(record) {
      this.showSea = true
      this.seaDetail = record
    },
    addSchool(record) {
      this.showSchool = true
      this.schoolDetail = record
    },
    toPart(record) {
      this.toAddPart = true
      const list = []
      if (this.craftBillPart.length) {
        this.craftBillPart.map(item => {
          list.push(item.seq)
        })
        this.maxSeq = Math.max.apply(null, list)
      }
      if (record) {
        this.partDetail = record
      }
    },
    toNewPart() {
      this.showNewPart = true
    },
    closeAddPart() {
      this.toAddPart = false
      this.getPartList()
    },
    closeNewPart() {
      this.showNewPart = false
      this.getPartList()
    },
    tocraft(record) {
      this.showCraftBillInter = true
      this.craftDetail = record
    },
    closecraft() {
      this.showCraftBillInter = false
      this.getInterliningList()
    },
    async deleteCraft(record) {
      const params = {
        id: record.id
      }
      const { realname } = this.userInfo
      params.operator = realname
      try {
        const res = await deleteInterlining('bill', params)
        if (res.code == 200) {
          this.$message.success('删除粘衬部位成功！')
          this.getInterliningList()
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('删除失败！')
      }
    },
    close() {
      this.showTemplate = false
      this.getTemplateList()
    },
    closePart() {
      this.showPart = false
      this.getPartList()
    },
    closeBill(values) {
      this.showBill = false
      if (values == 1) {
        this.billNo = ''
        this.inputBillNo = ''
        this.disabled = false
      } else {
        this.billList = values[0]
        this.billNo = this.billList.billNo
        if (values[0].stycolorid) {
          this.stycolor = values[0].stycolorid.split(',')
        }
        // this.getBillTable()
      }
    },
    toCopy(num) {
      if (num == 1) {
        this.tableType = 'N'
      } else {
        this.tableType = 'Y'
      }
      this.xlCode = this.billList.xlCode
      this.brandCode = this.billList.brandCode
      this.showTable = true
    },
    closeCopy(id) {
      this.showTable = false
      if (id) {
        this.copyid = id
        this.ifCopy = true
        this.getDetail(1)
      }
    },
    closeSea() {
      this.showSea = false
      this.getSpecList()
    },
    closeSchool() {
      this.showSchool = false
      this.getSchoolList()
    },
    async handleChangeinput(value, key) {
      const newData = [...this.craftBillTemplate]
      const target = newData.find(item => key === item.id)
      if (target) {
        target.description = value
      }
      const params = target
      const { realname } = this.userInfo
      params.operator = realname
      try {
        const res = await updateTemplate('bill', params)
        if (res.code == 200) {
          this.getTemplateList()
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('编辑失败！')
      }
    },
    async changeinputPart(value, key) {
      const newData = [...this.craftBillPart]
      const target = newData.find(item => key === item.id)
      if (target) {
        target.description = value
      }
      const params = target
      const { realname } = this.userInfo
      params.operator = realname
      try {
        const res = await updatePart('bill', params)
        if (res.code == 200) {
          this.getPartList()
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('编辑失败！')
      }
    },
    async changeSeq(value, key) {
      const newData = [...this.craftBillPart]
      const target = newData.find(item => key === item.id)
      if (target) {
        target.seq = value
      }
      const params = target
      const { realname } = this.userInfo
      params.operator = realname
      try {
        const res = await updatePart('bill', params)
        if (res.code == 200) {
          this.getPartList()
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('编辑失败！')
      }
    },
    handleSubmit(e) {
      e.preventDefault()
      if (!this.inputBillNo) {
        this.$message.error('请输入单号！')
      } else {
        this.form.validateFields((err, values) => {
          if (!err) {
            this.firstForm = values
            if (!values.stycolorid) {
              this.$message.error('请选择颜色！')
            } else {
              this.submit()
            }
            // this.submit()
          }
        })
      }

      // this.current += 1
    },
    async getDetail(num) {
      this.craftBillPart = []
      this.craftBillTemplate = []
      const params = {
        id: num ? this.copyid : this.id
      }
      try {
        const res = await getDetailList('bill', params)
        if (res.code == 200) {
          const detail = res.data
          if (!num) {
            this.billList = res.data
            this.statusTime = res.data.statusTime
            // this.stycolor = res.data.stycolorid.split(',')
            if (detail.stycolorid) {
              this.form.setFieldsValue({
                stycolorid: detail.stycolorid.split(',')
              })
            }
          }
          this.fileList = []
          this.statusUser = res.data.statusUser
          this.form.setFieldsValue({
            beof: detail.beof,
            fabricDesc: detail.fabricDesc,
            zyNum: detail.zyNum,
            process: detail.process,
            interlining: detail.interlining,
            tyReq: detail.tyReq,
            tyProcess: detail.tyProcess,
            commonReq: detail.commonReq,
            attention: detail.attention,
            long1: detail.long1,
            lat1: detail.lat1,
            long2: detail.long2,
            lat2: detail.lat2,
            wearingWay: detail.wearingWay ? detail.wearingWay.split(',') : [],
            craftDetail: detail.craftDetail ? detail.craftDetail.split(',') : [],
            pocketStyle: detail.pocketStyle ? detail.pocketStyle.split(',') : [],
            lowerHem: detail.lowerHem ? detail.lowerHem.split(',') : [],
            slashWay: detail.slashWay ? detail.slashWay.split(',') : [],
            coatFlap: detail.coatFlap ? detail.coatFlap.split(',') : [],
            trouserFlag: detail.trouserFlag ? detail.trouserFlag.split(',') : [],
            isLining: detail.isLining ? detail.isLining.split(',') : [],
          })
          console.log(this.form.getFieldsValue());
          this.form.setFieldsValue({
            cutting: detail.cutting ? detail.cutting : '核对样衣后裁剪、核对样板片数；排版避免色差与边中色差、拉布留意面料纬斜法一致，丝缕归直；摊布松度适宜，不可打刀眼、钻孔。'
          })
          if (detail.styleImg) {
            const obj = {
              name: 'pic.png',
              uid: detail.styleImg,
              status: 'done',
              url: detail.styleImg
            }
            this.fileList.push(obj)
          }
          this.getInterliningList()
          this.getTemplateList()
          this.getPartList()
          this.getSpecList()
          this.getSchoolList()
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取工艺单详情失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取工艺单详情失败！')
      }
    },
    async getBillList() {
      const params = {
        billNo: this.inputBillNo
      }
      try {
        const res = await getBillList('bill', params)
        if (res.code == 200) {
          this.billList = res.data
          if (res.data.stycolorid) {
            this.stycolor = res.data.stycolorid.split(',')
          }
          this.billNo = res.data.billNo
          this.sampleCode = res.data.sampleCode
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取工艺单失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取工艺单失败！')
      }
    },

    async getBillTable() {
      const params = {
        billNo: this.inputBillNo
      }
      try {
        const res = await getBillTable('bill', params)
        if (res.code == 200) {
          if (res.data.length == 1) {
            this.billList = res.data[0]
            this.billNo = res.data[0].billNo
            this.sampleCode = res.data[0].sampleCode
            this.stycolor = res.data[0].stycolorid.split(',')
          } else {
            this.showBill = true
            this.backList = res.data
          }
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
            this.billNo = ''
            this.inputBillNo = ''
            this.disabled = false
          } else {
            this.$message.error('获取工艺单失败！')
            this.billNo = ''
            this.inputBillNo = ''
            this.disabled = false
          }
        }
      } catch (error) {
        this.$message.error('获取工艺单失败！')
        this.billNo = ''
        this.inputBillNo = ''
        this.disabled = false
      }
    },
    async submit() {
      var params = this.firstForm
      params.isTemp = 'N'
      params.stycolorid = params.stycolorid.toString()
      if (this.nonError) {
        const { realname } = this.userInfo
        params.operator = realname
        params.billNo = this.billNo
        if (this.fileList.length) {
          params.styleImg = this.fileList[0].url
        }
        console.log(params)
        if (this.id) {
          params.id = this.id
        }
        params.wearingWay = params.wearingWay ? params.wearingWay.toString() : ''
        params.craftDetail = params.craftDetail ? params.craftDetail.toString() : ''
        params.pocketStyle = params.pocketStyle ? params.pocketStyle.toString() : ''
        params.lowerHem = params.lowerHem ? params.lowerHem.toString() : ''
        params.slashWay = params.slashWay ? params.slashWay.toString() : ''
        params.coatFlap = params.coatFlap ? params.coatFlap.toString() : ''
        params.trouserFlag = params.trouserFlag ? params.trouserFlag.toString() : ''
        params.isLining = params.isLining ? params.isLining.toString() : ''
        try {
          const res = this.idEdit ? await updatelist('bill', params) : await createList('bill', params)
          if (res.code == 200) {
            this.$message.success(this.idEdit ? '修改工艺单成功！' : '新建工艺单成功！')
            if (!this.idEdit) {
              this.id = res.data
            }
            if (!this.idEdit && !this.ifCopy) {
              this.getInterliningList()
            }
            this.$nextTick(() => {
              if (this.ifCopy && this.id) {
                this.ifCopy = false
                this.submitCraft()
                this.submitTemplate()
                this.submitPart()
                this.submitSea()
                if (this.billList.brand == '校服') {
                  this.submitSchool
                }
              }
            })
            this.idEdit = true
            // this.reset()
          } else {
            this.$message.warning(res.msg)
          }
        } catch (error) {
          this.$message.warning('操作失败！')
        } finally {
          this.loading = false
        }
      }
    },
    async submitCraft() {
      const { realname } = this.userInfo
      this.craftBillInterlining.map(item => {
        item.billId = this.id
        item.operator = realname
        item.id = ''
      })
      try {
        const res = await saveInterlining('bill', this.craftBillInterlining)
        if (res.code == 200) {
          this.getInterliningList()
        } else {
          this.$message.warning(res.msg)
        }
      } catch (error) {
        this.$message.warning('操作失败！')
      }
    },
    async submitTemplate() {
      const { realname } = this.userInfo
      this.craftBillTemplate.map((item, i) => {
        item.billId = this.id
        item.operator = realname
        item.id = ''
      })
      try {
        const res = await saveTemplate('bill', this.craftBillTemplate)
        if (res.code == 200) {
          this.getTemplateList()
        } else {
          this.$message.warning(res.msg)
        }
      } catch (error) {
        this.$message.warning('操作失败！')
      }
    },
    async submitPart() {
      const { realname } = this.userInfo
      this.craftBillPart.map((item, i) => {
        item.billId = this.id
        item.operator = realname
        item.id = ''
      })
      try {
        const res = await savePart('bill', this.craftBillPart)
        if (res.code == 200) {
          this.getPartList()
        } else {
          this.$message.warning(res.msg)
        }
      } catch (error) {
        this.$message.warning('操作失败！')
      }
    },
    async submitSea() {
      const { realname } = this.userInfo
      this.craftBillSpec.map((item, i) => {
        item.billId = this.id
        item.operator = realname
        item.id = ''
      })
      try {
        const res = await saveSpec('bill', this.craftBillSpec)
        if (res.code == 200) {
          this.getSpecList()
        } else {
          this.$message.warning(res.msg)
        }
      } catch (error) {
        this.$message.warning('操作失败！')
      }
    },
    async submitSchool() {
      const { realname } = this.userInfo
      this.craftBillSchoolVos.map((item, i) => {
        item.billId = this.id
        item.operator = realname
        item.id = ''
      })
      try {
        const res = await saveSchool('bill', this.craftBillSchoolVos)
        if (res.code == 200) {
          this.getSchoolList()
        } else {
          this.$message.warning(res.msg)
        }
      } catch (error) {
        this.$message.warning('操作失败！')
      }
    }
  }
}
</script>

<style scoped lang="less">
.top {
  position: fixed;
  z-index: 100;
  width: 100%;
  background: #fff;
  top: 57px;
}

.info-action {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  // margin-bottom: 20px;
}

.ml-20 {
  margin-left: 20px;
}

.steps-content {
  margin-top: 16px;
  min-height: 200px;
  text-align: center;
  padding-top: 50px;
}

.steps-action {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
}

.ant-upload-picture-card-wrapper {
  width: 20%;
}

.ant-upload-picture-card-wrapper[data-v-7206a2ce] {
  width: 100%;
}

.dynamic-delete-button {
  cursor: pointer;
  font-size: 24px;
  color: #999;
  margin: 50px 5px;
  transition: all 0.3s;
}

.dynamic-delete-button:hover {
  color: #777;
}

.dynamic-delete-button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

.ant-upload-picture-card-wrapper[data-v-f7c29e7e] {
  width: 95%;
}

.steps-content[data-v-f7c29e7e] {
  padding-top: 20px;
}

.previmg {
  display: flex !important;
  justify-content: center;
  align-items: center;
}

.previmg img {
  width: 500px;
}

.dynamic-delete-button2 {
  cursor: pointer;
  font-size: 24px;
  color: #999;
  /* margin: 50px 5px; */
  top: -92px;
  left: 380px;
  position: relative;
}

.dynamic-delete-button2:hover {
  color: #777;
}

.dynamic-delete-button2[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
</style>
<style>
.inputRight input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}

.inputRight input[type='number'] {
  -moz-appearance: textfield;
}
</style>